<template>
  <div class="limit-warning">
    <div class="topbox">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="月超额预警" name="over-month"></el-tab-pane>
        <el-tab-pane label="日超额预警" name="over-day"></el-tab-pane>
        <el-tab-pane label="小时超额预警" name="over-hour"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="bodybox">
      <component :is="Feature" v-if="Feature"/>
    </div>
  </div>
</template>
<script>
export default {
  name: 'CallPoliceIndex',
  data() {
    return {
      activeName:'over-month',
      Feature:null
    };
  },
  mounted() {
    const val=this.$route.params.name
    if(val)this.activeName=val
    this.handleClick({name:val=='over-day'?val:this.activeName})
  },
  methods: {
    handleClick(val,row){
      import(`./${val.name}/index.vue`)
        .then(module => {
          this.Feature = module.default
        })
    }
  },
};
</script>
<style lang="scss" scoped>
.limit-warning{
  height: 100%;
  padding: 10px;
  .topbox{
    background-color: #fff;
    margin-bottom: 10px;
    padding-left: 20px;
  }
  .bodybox{
    height: calc(100% - 50px);
  }
}
::v-deep .el-tabs__nav-wrap::after {
  position: static !important;
}
::v-deep .el-tabs__header{
  margin: 0;
}
</style>